<template>
    <div class="over-calc-config">
        <el-tabs type="card" v-model="editableTabsValue" @tab-click="updateActiveTab" @tab-remove="removeTab" closable ref="tabs">
            <el-tab-pane label="超标归因配置表" name="list">
                <OverCalcConfigList ref="overCalcConfigList" @handleRowConfig="handleRowConfig" />
                <!-- <OverCalcConfigInfo /> -->
            </el-tab-pane>
            <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :name="item.name">
                <span slot="label"><i class="el-icon-discover"></i> {{ item.title }}</span>
                <component
                    :is="item.content"
                    :transToResultDetail="item.data"
                    :componId="index"
                    :cur="item.name == editableTabsValue"
                    :editableTabsValue="editableTabsValue"
                    @removeTab="removeTab"
                ></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import XEUtils from 'xe-utils';
import OverCalcConfigInfo from './over-calc-config/over-cal-config-info.vue';
import OverCalcConfigList from './over-calc-config/over-cal-config-list.vue';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'OverCalcConfig',
    components: {
        OverCalcConfigList,
        OverCalcConfigInfo,
    },
})
export default class OverCalcConfig extends Vue {
    private editableTabsValue: string = 'list'; // 当前标签

    private transToResultDetail = {}; // 详情数据

    private editableTabs = []; // 所有tabs值

    private oldValue = 'list'; // 删除标记记录切换

    private tabRecord: any[] = []; // 标签记录
    mounted() {}

    /* **************************  tab标签处理START ****************/
    // 切换标签页
    private updateActiveTab(tab): void {
        if (tab.name == 'list') {
            this.oldValue = tab.name;
        }
        if (tab.name === this.editableTabsValue) {
            return;
        }
    }

    // 添加标签
    private handleRowConfig(row): void {
        let value = '新增超限归因配置';
        if (row.operateType == 'add') {
        } else {
            value = (row.operateType == 'look' ? '查看' : '编辑') + row.configId;
        }
        let tabs = XEUtils.map(this.editableTabs, item => item.name);
        if (tabs.includes(value)) {
            this.editableTabsValue = value;
        } else {
            this.editableTabs.push({
                title: value,
                name: value,
                content: OverCalcConfigInfo,
                data: JSON.parse(JSON.stringify(row)),
            });
            this.editableTabsValue = value;
            this.$set(this.tabRecord, this.editableTabsValue, this.oldValue);
        }
    }

    // 移除tab
    removeTab(target?: string, operateType?: string) {
        let targetName = target || this.editableTabsValue;
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
            tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                        activeName = nextTab.name;
                    } else {
                        activeName = this.tabRecord[targetName];
                    }
                }
            });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        if (operateType) {
            let $list = this.$refs['overCalcConfigList'] as any;
            console.log($list, $list.getTableData());
        }
    }

    /* **************************  tab标签处理END ****************/
}
</script>
<style lang="scss" scoped>
.over-calc-config {
    padding-top: 10px;
    min-width: 1200px;
    height: 100%;
}
.over-calc-config /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px;
}

.over-calc-config /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

.over-calc-config /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(1) .el-icon-close {
    display: none;
}

.vxe-table .vxe-body--row.row--hover {
    background-color: #cce9ff !important;
}

.vxe-table .vxe-body--row.row--current {
    background-color: #2589f5 !important;
    color: #fff !important;
}

/deep/ .el-tab-pane {
    color: #575757 !important;
}
</style>
